<template>
  <div v-if="props.res && goodsSwiper.length">

    <nut-swiper @change="changeCurrent" :pagination-visible="true" :init-page="0" :loop="true">
      <nut-swiper-item v-if="props.res.data.goodsVideo" :custom-style="{ height: '750rpx' }">
        <div h-750rpx w-full>
          <!-- #ifndef APP-PLUS -->
          <video class="video" show-mute-btn style="width:100%; height:100%;" muted autoplay
            :src='props.res.data.goodsVideo' loop object-fit="cover"></video>

          <!-- #ifdef APP-PLUS -->
          <view style="width:100%; height:100%;">
            <!-- <video class="video" show-mute-btn style="width:100%; height:100%;" muted autoplay :src='video' loop
              object-fit="cover"></video> -->
            <view v-html="html" style="width:100%; height:100%;"></view>
          </view>
          <!-- #endif -->
          <!-- #endif -->
        </div>
      </nut-swiper-item>
      <nut-swiper-item :custom-style="{ height: '750rpx' }" v-for="(item, index) in goodsSwiper" :key="index">
        <img w-full h-full :src="item" />
      </nut-swiper-item>

      <template v-slot:page>
        <div class="page"> {{ current }}/{{ props.res.data.goodsVideo ? props.res.data.goodsGalleryList.length + 1 :
          props.res.data.goodsGalleryList.length }} </div>
      </template>
    </nut-swiper>
  </div>
</template>

<script setup lang="ts">
const current = ref(1)
const props = defineProps({
  res: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const html = ref('')

const goodsSwiper = ref([])
watch(() => props.res.data.goodsGalleryList, (val) => {
  // 翻转对象赋值
  goodsSwiper.value = val
}, {
  deep: true,
  immediate: true
})



function changeCurrent(val: any) {
  current.value = val + 1
}
</script>

<style scoped>
.page {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 46px;
  height: 22px;
  background: rgba(0, 0, 0, 0.33);
  border-radius: 22px;
  text-align: center;
  color: #fff;
  font-size: 14px;
}
</style>
